const { babel } = require('@rollup/plugin-babel')
const clear = require('rollup-plugin-clear')
const terser = require('@rollup/plugin-terser')
const htmlTemplate = require('rollup-plugin-generate-html-template')
const nodeResolve = require('@rollup/plugin-node-resolve')
const replace = require('@rollup/plugin-replace')
const json = require('@rollup/plugin-json')
const commonjs = require('@rollup/plugin-commonjs')
const vue = require('rollup-plugin-vue')
const postcss = require('rollup-plugin-postcss')
const { liveServer } = require('rollup-plugin-live-server')
const ElementPlus = require('unplugin-element-plus/rollup')
const banner2 = require('rollup-plugin-banner2')
const postcssImport = require('postcss-import') // 解析并内联 CSS 中的 @import 规则，将多个 CSS 文件合并为单个文件
const postcssPresetEnv = require('postcss-preset-env') // postcss-preset-env 自动帮助我们添加 autoprefixer， 允许开发者使用未来 CSS 特性（如变量、嵌套、CSS Grid），并自动转换为兼容旧浏览器的代码。

module.exports = {
  //   单入口写法
  input: './src/main.js',
  //   多入口写法 ( 键值对的形式，其中键就是打包出来的文件名 )
  //   input: {
  //     index: "./src/index.js",
  //     index2: "./src/index2.js",
  //   },

  output: [
    {
      // 指定存放目录，(生成多个打包结果才需要的， 多入口)
      // dir: './dist',
      // 指定打包出来的文件名称
      file: './dist/bundle.user.js', // (单入口)。 多入口就不需要这个去指定文件名字了
      // 模块化方案
      format: 'iife',
      // 对外暴漏的模块名，（仅在UMD格式下生效）
      name: 'MyModule',
      // 插件：此处注册的插件，仅仅是对出口文件进行一些处理（例如:压缩代码）
      plugins: [],
    },
    // {
    //     file: "./dist/bundle.js",
    //     format: "iife",
    //     name: "MyModule",
    // },
  ],
  // 注册插件
  plugins: [
    // 解析 .vue 文件
    vue(),
    // 解析 element-plus 文件
    ElementPlus({}),
    // 解析 css 样式
    postcss({
      // extract: true, // 提取 css 到单独的文件中 或者 path.resolve('dist/bundle.css')
      plugins: [
        postcssImport(),
        postcssPresetEnv(),
      ],
    }),
    // 打包解析第三方插件
    nodeResolve({ jsnext: true, preferBuiltins: true, browser: true }), // 去除内部的配置项，则无法打包 axios
    /**
     * jsnext: true 表示支持 ES6 模块语法
       preferBuiltins: true 表示优先使用 Node.js 内置模块
       browser: true 表示兼容浏览器环境
    */
    commonjs({ browser: true }),
    babel({
      babelHelpers: 'runtime',
      exclude: 'node_modules/**',
    }),
    replace({
      'process.env.NODE_ENV': JSON.stringify('production'),
      preventAssignment: true, // 防止对替换后的值进行赋值操作，以避免潜在的意外行为
    }),
    banner2(
      () => `
// ==UserScript==
// @name         New Userscript
// @version      0.1.0
// @description  try to take over the world!
// @author       You
// @match        https://www.baidu.com/
// @grant        GM_xmlhttpRequest
// @grant        GM_cookie
// ==/UserScript==

`
    ),
    clear({
      // 指定要清除的目录
      targets: ['dist'],
      // 以监视模式调用插件，需要配置 rollup --watch / rollup -w
      watch: true, // default: false
    }),
    // terser(), // 压缩代码。插件数组按顺序执行，压缩代码一般放在最后
    // json(),
    htmlTemplate({
      template: './src/template.html',
      target: 'index.html',
      attrs: ['type="module"'], // 打包成 ESM 规范是转换 import 和 export 规范
    }),
    // liveServer({
    //   port: 5000,
    //   host: "localhost",
    //   root: "dist",
    //   file: "index.html",
    //   open: false,
    // }),
  ],
  // 指定排除项
  external: [],
}
